<template>
	<div class="v-view">
		<Breadcrumb moduleName="事件分析">
			<Shortcuts slot="content"></Shortcuts>
		</Breadcrumb>
		<div class="content">
			<div class="nav-left">
				<a-menu mode="inline" :open-keys="openKeys" style="width: 256px;height: 810px" @openChange="onOpenChange">
					<a-sub-menu key="sub1">
						<span slot="title">
							<a-icon type="mail" />
							<span>新手入门</span>
						</span>
						<a-menu-item key="1">Option 1</a-menu-item>
						<a-menu-item key="2">Option 2</a-menu-item>
						<a-menu-item key="3">Option 3</a-menu-item>
						<a-menu-item key="4">Option 4</a-menu-item>
					</a-sub-menu>
					<a-sub-menu key="sub2">
						<span slot="title">
							<a-icon type="appstore" />
							<span>使用手册</span>
						</span>
						<a-menu-item key="5">数据看板</a-menu-item>
						<a-menu-item key="6">事件分析</a-menu-item>
						<a-menu-item key="7">留存分析</a-menu-item>
					</a-sub-menu>
				</a-menu>
			</div>

			<div class="nav-right"></div>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'
import Shortcuts from '@/layout/components/Breadcrumb/Shortcuts.vue'

@Component({
	components: {
		Breadcrumb,
		Shortcuts
	}
})
export default class Help extends Vue {
	rootSubmenuKeys: any = ['sub1', 'sub2', 'sub4']
	openKeys: any = ['sub1']

	onOpenChange(openKeys: any) {
		const latestOpenKey = openKeys.find((key: any) => this.openKeys.indexOf(key) === -1)
		if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
			this.openKeys = openKeys
		} else {
			this.openKeys = latestOpenKey ? [latestOpenKey] : []
		}
	}
}
</script>

<style lang="scss" scoped>
.v-view {
	height: 100%;
}
.content {
	padding: 20px;
	display: flex;
	.nav-right {
		width: 85%;
		background: #fff;
		margin-left: 20px;
	}
}
</style>
